﻿﻿
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${info.hotel_name}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="assets/img/favicon.jpg" sizes="32x32">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <style>
        .layui-form-select dl dd.layui-this {
            background-color: #9CCC65
        }
    </style>

</head>
<body>
<!-- main wrapper -->
<div class="wrapper">
    <!-- header -->
    <header class="header">
        <div class="header-bottom">
            <nav class="navbar navbar-universal navbar-custom">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="logo">
                                <a href="javascript:;" class="navbar-brand page-scroll">
                                    <img width="143px" height="49px" src="/download/${info.icon}" alt="logo">
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="navbar-header">
                                <button type="button" data-toggle="collapse" data-target=".navbar-main-collapse"
                                        class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span
                                        class="icon-bar"></span><span class="icon-bar"></span><span
                                        class="icon-bar"></span></button>
                            </div>
                            <div class="collapse navbar-collapse navbar-main-collapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href="javascript:;" style="color: #9CCC65">主页</a></li>
                                    <%--  <li><a href="/desk/reservation">房间预定</a></li>--%>
                                    <li><a href="/desk/findOrder">查询预定</a></li>
                                    <li><a href="/desk/about">关于我们</a></li>
                                    <%--  <li><a href="/desk/login">注册/登录</a></li>--%>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <!-- /header -->
    <!-- parallax -->
    <section class="bg-parallax parallax-window">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="parallax-text">
                        <h2 class="parallax_t __white">${info.hotel_name}</h2>
                        <h2 class="parallax_t __green">${info.hotel_intro_short}</h2>
                        <p>${info.hotel_intro_long}</p>
                    </div>
                </div>
                <!-- planner-->
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 planner">
                    <div class="planner-block">
                        <form action="/desk/welcome" method="post" class="layui-form form-planner form-horizontal">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <label>入住时间</label>
                                        <input type="text" class="layui-input" id="inDate" name="inDate"
                                               placeholder="yyyy-MM-dd">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <label>退房时间</label>
                                        <input type="text" class="layui-input" id="outDate" name="outDate"
                                               placeholder="yyyy-MM-dd">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label>入住人数</label>
                                        <div class="">
                                            <select id="peopleNumber" name="peopleNumber" lay-verify="">
                                                <option value="1" selected>1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label>价格区间</label>
                                        <div id="sliderRange" name="moneyRange" class="layui-slider"></div>
                                        <div style="color: white">
                                            <span id="tipsLeft" style="float: left">${reserve.moneyMin}￥</span>
                                            <input type="hidden" name="moneyMin" value="${reserve.moneyMin}">
                                            <span id="tipsRight" style="float: right">${reserve.moneyMax}￥</span>
                                            <input type="hidden" name="moneyMax" value="${reserve.moneyMax}">

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="planner-check-availability">
                                        <input type="submit" class="btn btn-default" value="搜索">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- /planner-->
            </div>
        </div>
    </section>
    <!-- /parallax -->
    <!-- chose best rooms -->
    <section class="best-room">
        <div class="container">
            <div class="title-main">
                <h2 class="h2">酒店特色客房<span class="title-secondary">店长推荐</span></h2>
            </div>
            <div class="best-room-carousel">
                <ul class="row best-room_ul">
                    <c:if test="${empty roomType}">
                        <span class="title-secondary">暂无符合要求的客房，请稍后重试</span></h2>
                    </c:if>
                    <c:forEach var="m" items="${roomType}">
                        <li class="col-lg-4 col-md-4 col-sm-6 col-xs-12 best-room_li">
                            <div class="best-room_img"><!--assets/images/best-rooms/1.jpg -->
                                <a href="/desk/reserveOne?id=${m.id}&inDate=${reserve.inDate}&outDate=${reserve.outDate}">
                                    <c:if test="${empty m.icon}">
                                        <img src="assets/images/best-rooms/1.jpg">
                                    </c:if>
                                    <c:if test="${not empty m.icon}">
                                        <img src="/download/${m.icon}">
                                    </c:if>
                                </a>
                                <div class="best-room_overlay">
                                    <div class="overlay_icn"><a
                                            href="/desk/reserveOne?id=${m.id}&inDate=${reserve.inDate}&outDate=${reserve.outDate}"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="best-room-info">
                                <div class="best-room_t"><a
                                        href="/desk/reserveOne?id=${m.id}&inDate=${reserve.inDate}&outDate=${reserve.outDate}">${m.name}</a>
                                </div>
                                <div class="best-room_desc">剩余${m.counts}间</div>
                                <div class="best-room_price">
                                    <span>${m.price}</span>元/天
                                </div>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </section>

    <!-- /choose best rooms -->
    <!-- lux banner parallax -->
    <section class="banner bg-parallax2" style="padding-bottom: 5px;">
        <div class="overlay"></div>
        <div class="container">
            <div class="title-main"><h2 class="h2" style="color: whitesmoke;">酒店位置</h2></div>
            <div class="parallax-text">
                <div id="map" class="container" style="width: 100%;height:275px;text-align: center;">
                </div>
            </div>
        </div>
    </section>
    <!-- /lux banner parallax -->
    <!-- /main wrapper -->
    <!-- footer -->
    <footer class="footer">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-top_logo">
                            <a href="javascript:;">
                                <img width="143px" height="49px" src="/download/${info.icon}">
                            </a>
                        </div>
                        <div class="footer-top_txt">
                            <p id="web-footer-intro">${info.hotel_intro_long}</p>
                        </div>
                        <div class="footer-top_address">
                            <div><i class="fa fa-phone"></i> 电话: <span>${info.hotel_phone}</span></div>
                            <div><i class="fa fa-home"></i> 地址: <span>${info.hotel_address}</span></div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-top_rooms">
                            <ul>
                                <c:forEach var="m" items="${roomType}" begin="0" end="2">
                                    <li>
                                        <div class="rooms_img">
                                            <a href="/desk/reserveOne?id=${m.id}&inDate=${reserve.inDate}&outDate=${reserve.outDate}">
                                                <c:if test="${empty m.icon}">
                                                    <img src="assets/images/best-rooms/1.jpg">
                                                </c:if>
                                                <c:if test="${not empty m.icon}">
                                                    <img src="/download/${m.icon}">
                                                </c:if>
                                            </a>
                                        </div>
                                        <div class="rooms_info">
                                            <div class="rooms_t"><a
                                                    href="/desk/reserveOne?id=${m.id}&inDate=${reserve.inDate}&outDate=${reserve.outDate}">${m.name}</a>
                                            </div>
                                            <div class="rooms_props"><span>￥${m.price}</span></div>
                                        </div>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-bottom_copy" style="cursor: pointer" onmouseover='mo()' onmouseout="ct()">
                            Copyright &copy; 2020 huayue.com
                            <span id="stageDoor">
                                <a target="_blank" href="/background/views/user/login.html">后台主页</a>
                            </span>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="footer-bottom_links">
                            <a class="active" href="javascript:;">主页</a>
                            <a href="/desk/reservation">预定</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<!-- /footer -->
<!-- Scripts -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=ef9b5628f4ee4851bb158f391c0f8c1e"></script>
<!-- 异步初始化高德地图插件-->
<script>
    //初始化地图插件
    window.onload = function () {
        var map = new AMap.Map('map', {
            zoom: 15,
            center: [${info.hotel_marker}]
        });
        // 创建一个 Marker 实例：（标记点）
        var marker = new AMap.Marker({
            position: new AMap.LngLat(${info.hotel_marker}),
            title: "${info.hotel_name}",

        });
        marker.on('click', function (e) {
            marker.markOnAMAP({
                name: '${info.hotel_name}',
                position: marker.getPosition()
            })
        })
        map.add(marker);
    }
</script>


<script type="text/javascript" src="assets/layui/layui.js"></script>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script>
    function getNewData(dateTemp, days) {
        var dateTemp = dateTemp.split("-");
        var nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]); //转换为MM-DD-YYYY格式
        var millSeconds = Math.abs(nDate) + (days * 24 * 60 * 60 * 1000);
        var rDate = new Date(millSeconds);
        var year = rDate.getFullYear();
        var month = rDate.getMonth() + 1;
        if (month < 10) month = "0" + month;
        var date = rDate.getDate();
        if (date < 10) date = "0" + date;
        return (year + "-" + month + "-" + date);
    }

    function timeStamp2String(time) {
        var datetime = new Date();
        datetime.setTime(time);
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
        var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
        var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
        var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
        var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    }

    function dateFormat(date) {
        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate())
    }

    var themeColor = "#9CCC65";
    $("#peopleNumber").find("option[value=" + ${reserve.peopleNumber} +"]").prop("selected", true);
    layui.use(['form', 'laydate', 'slider', 'jquery'], function () {
        var form = layui.form
            , laydate = layui.laydate
            , slider = layui.slider
            , $ = layui.jquery;
        form.render();

        var nowDate = '${reserve.inDate}';

        // var chooseDate = dateFormat(nowDate);
        var startDate = laydate.render({
            elem: '#inDate'
            , min: 0
            , max: 14
            , value: nowDate
            , theme: themeColor
            , done: function (value, date) {
                endDate.config.min = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                };
                $("#outDate").val(getNewData(value, 1));
            }
        });

        var endDate = laydate.render({
            elem: '#outDate'
            , min: 0
            , max: 14
            , theme: themeColor
            , value: '${reserve.outDate}'
            , done: function (value, date) {
            }
        });

        slider.render({
            elem: '#sliderRange'
            , min: 50
            , max: 1000
            , step: 10
            , range: true
            , value: [${reserve.moneyMin}, ${reserve.moneyMax}]
            , tips: false
            , theme: themeColor
            , change: function (value) {
                $("#tipsLeft").html(value[0] + "￥");
                $("#tipsRight").html(value[1] + "￥");
                $('input[name="moneyMin"]').val(value[0]);
                $('input[name="moneyMax"]').val(value[1]);
            }
        });
    })
</script>
<script src="assets/js/jquery.min.js"></script>
<script>
    // 隐藏后台入口
    $("#stageDoor").hide();
    var c;
    var mo = function () {
        c = setTimeout(function () {
            $("#stageDoor").show(500);
        }, 3000);
    }

    var ct = function () {
        clearTimeout(c);
    }
</script>
<!-- /Scripts -->
</body>
